@vvedantb/ui 0.17.1 → 0.18.1

package/README.md

@@ -7,7 +7,7 @@ Shared React 19 web UI. Source-exported: no build step.
 | `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
-| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`. CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
+| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`, `border-beam` (opt-in, for `BorderBeam`), `markdown` (opt-in, for `Markdown`). CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
 | `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. CSS. |
 | `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset (`.mjs`) for `@config "@vvedantb/ui/tokens/tailwind-preset"`. Kept as a build-tool entry: Tailwind needs a resolvable package path, and it is not a React API. |
 | `@vvedantb/ui/landing.css` | Landing page classes (`landing-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
@@ -1039,7 +1039,7 @@ import { SonnerToaster, toast } from "@vvedantb/ui";
 />;
 ```
 
-With no new props the toaster looks as it did in 0.2.1. Caller props merge with the package defaults instead of replacing them:
+With no new props and no `UiConfig.SonnerToaster` entry the toaster looks as it did in 0.2.1. An entry sets app defaults for any prop (see "App config: AI chat" below). Caller props merge with the package defaults instead of replacing them:
 
 - `toastOptions.classNames`: per key, the package classes come first and the caller classes follow, so callers can override utilities. Other `toastOptions` fields (such as `duration`) take the caller value.
 - `icons`: merged per key. With `toastIcons="filled24"` the caller overrides single icons and keeps the rest.
@@ -1063,9 +1063,255 @@ With `closeButtonStyle="hoverChip"`, hover changes the text colour, and sonner m
 
 Helpers: `createToasterClassNames`, `mergeToastClassNames`, `mergeToastOptions`, `mergeToasterStyle`, `filledToastIcons`. Fixture: `tokens/examples/toaster/`.
 
+## App config
+
+`UiConfigProvider` gives components app-level defaults, so an app does not pass the same props at every call site. Wrap the app once:
+
+```tsx
+import { UiConfigProvider, type UiConfig } from "@vvedantb/ui";
+
+const config = { cn: appCn } satisfies UiConfig;
+
+<UiConfigProvider config={config}>{app}</UiConfigProvider>
+```
+
+Defaults are unchanged. Without a provider, or with an empty entry, every component renders its built-in DOM. `src/default-dom.test.tsx` renders 53 primitives and AI elements without a provider and compares `document.body` (portals included) with `tokens/test/fixtures/default-dom.json`, byte for byte.
+
+- Root exports: `UiConfigProvider` (`config`, `children`), `useUiConfig(name)` (the app's entry for one component, or `undefined`) and the `UiConfig` and `UiConfigProviderProps` types.
+- An entry's `classes` replace built-in classes part by part. A part left out keeps its default, and a caller `className` still merges after it. Other keys are default prop values. An explicit prop always wins.
+- `cn`: the class merger that components use in place of the built-in `cn` when they merge a caller `className`. Set it when the app's tailwind-merge setup differs, for example when it does not treat `rounded-surface` as a radius class and relies on the CSS order instead. Components read it with the internal `useCn` hook.
+- Component entries and opt-in props are in the sections below: "App config: existing primitives", "Loaders, rows, status, sortable list and helpers", "App config: AI chat", "Agent activity, plan, tests, preview and model picker", "Kibo blocks".
+
+## App config: existing primitives
+
+`UiConfig` entries and opt-in props for components that were already in the package. Without an entry or a new prop, each one renders its built-in DOM. Every component in this section merges a caller `className` with `UiConfig.cn` when it is set.
+
+### Controls
+
+```tsx
+const config = {
+  Button: { classes: { variant: { default: "bg-brand text-white" }, size: { xs: "h-7 px-2 text-2xs" } } },
+  Tabs: { variant: "segmented", pillMotion: "xy" },
+  ClearInput: { animation: "none" },
+} satisfies UiConfig;
+```
+
+- `Button`: `classes.base`, `classes.variant.<variant>`, `classes.size.<size>`. New size `xs` (`h-7 rounded-md px-2 text-xs hit-target`, 14px icons).
+- `Badge`: `classes.base`, `classes.variant.<variant>`.
+- `Input`, `Textarea`: `classes.base`.
+- `Checkbox`: `classes.root`, `classes.indicator`, `icon`. New prop `icon`: the indicator content (default a 14px check). The `CheckboxProps` type is exported.
+- `Switch`: `classes.root`, `classes.thumb`.
+- `Slider`: `classes.root`, `classes.track`, `classes.range`, `classes.thumb`. `trackClassName`, `rangeClassName` and `thumbClassName` still merge after them. `children` now render inside the track, after the range (for example tick marks). Before, they were dropped.
+- `ButtonGroup`: `classes.base`, `classes.orientation.<horizontal|vertical>`, `classes.text` (`ButtonGroupText`), `classes.separator` (`ButtonGroupSeparator`).
+- `InputGroup`: `classes.root`, `classes.addon.base`, `classes.addon.align.<align>`, `classes.button.base`, `classes.button.size.<size>`, `classes.text`, `classes.input`, `classes.textarea`. New prop `classes` on `InputGroupAddon` (`{ addon }`), `InputGroupText` (`{ text }`), `InputGroupInput` (`{ input }`) and `InputGroupTextarea` (`{ textarea }`): the same keys for one instance; they win over the entry.
+- `ClearInput`: `animation`, `classes.wrapper`, `classes.input`, `classes.button`. New prop `animation`: `"dissolve"` (default) or `"none"`, which clears at once, focuses the input and renders only the wrapper (`relative`), the input and the clear button. The `dissolve` wrapper keeps its `t-clear` classes and adds `classes.wrapper`. New prop `classes`: the same keys for one instance, each wins over the entry. New prop `clearButton` (with `"none"`): `"filled"` (default) mounts the button while there is a value; `"always"` keeps it mounted, hidden while empty (`pointer-events-none opacity-0`, `tabIndex=-1`, `aria-hidden`), and the input always reserves `pr-9`.
+- `SearchInput`: `classes.wrapper` (a base for the wrapper), `classes.input` (replaces the size classes), `classes.icon` (replaces the icon classes), `iconSize` (default 16), `label`, `placeholder`, `clearLabel`, `enterKeyHint` (`false` leaves `aria-label` or `enterkeyhint` off), and `classNameTarget: "wrapper"` to send `className` to the wrapper instead of the input. New props: `onClear` (called after `onChange` when the value becomes empty) and `inputClassName` (merged into the input last).
+- `Calendar`: `classes.base` replaces the root `className` classes; every other key replaces that DayPicker `classNames` key (a caller `classNames` still wins). `components` is the default for the prop, applied over the built-in `Root` and `Chevron`. New export `CalendarDayButton`: DayPicker's day button plus `data-selected`, for classes such as `data-[selected=true]:bg-primary` on the button; pass it as `components.DayButton`.
+- `Carousel`: `classes.dots`, `classes.dot`, `classes.dotActive`, `classes.dotInactive` for the new `CarouselDots` (one button per snap, nothing for a single page). `useCarousel` is exported and its context adds `selectedIndex`, `scrollSnaps` and `scrollTo`.
+- `Tabs`: `variant` (default for the `TabsList` prop), `pillMotion` (`"x"` default; `"xy"` moves the segmented pill on both axes with `transform`, for lists that wrap or run in a column), `classes.list` (replaces the list classes of every variant), `classes.size.<default|sm>`, `classes.pill`, `classes.trigger` (every trigger), `classes.content`. New `TabsList` prop `size`: `"sm"` shrinks the triggers (`[&_.t-tab]:px-2.5 py-1 text-xs`); `"default"` adds no classes. New `TabsBar`: a tab strip on a bottom hairline (`border-b border-border`, `px-3 py-2`; `size="sm"` `px-2 py-1.5`) with an `actions` slot on the right. `syncTabsPill` takes an optional motion (`"x"` or `"xy"`).
+- `Accordion`: `classes.item`, `classes.header`, `classes.trigger`, `classes.content` (the animated panel), `classes.contentInner` (the padded box inside it), `icon`. New `AccordionTrigger` prop `icon`: shown after the children (default the chevron). New prop `classes` on `AccordionItem` (`{ item }`), `AccordionTrigger` (`{ header, trigger }`) and `AccordionContent` (`{ content, contentInner }`): the same keys for one instance; they win over the entry.
+- `Collapsible`: `classes.trigger`, `classes.content`. The parts have no built-in classes, so without an entry `className` passes through untouched. `CollapsibleTrigger` and `CollapsibleContent` are now thin wrappers (same DOM, refs still reach the element); the `CollapsibleContentProps` type is exported.
+- Deprecated `AccordionAlt*`, `InputGroupAlt*` and `ClearInputAlt` wrap the main parts with their old markup (pinned by `src/ui/alt-wrappers.test.tsx`; no `UiConfig` entry reaches them). Use the main components; the `Alt` names go in a later minor release once consumers move. `InputGroupAlt` (the root) and `InputGroupButtonAlt` stay a plain `<div>` and a `Button`: the root renders `data-input-group` before `class`, and the button has no default `type`, which the main parts cannot reproduce.
+
+### Overlays
+
+```tsx
+<UiConfigProvider config={{ Dialog: { viewportAware: false, classes: { content: "..." } }, Tooltip: { delayDuration: 300, portal: true } }}>
+```
+
+| Entry | `classes` parts | Other keys |
+| --- | --- | --- |
+| `Dialog` | `trigger`, `overlay`, `content` (both layouts), `centered`, `compact`, `close`, `header`, `body`, `footer`, `title`, `description` | `viewportAware` |
+| `Popover` | `trigger`, `content` | `sideOffset`, `collisionPadding` |
+| `HoverCard` | `content` | `openDelay`, `closeDelay`, `sideOffset`, `portal` |
+| `Tooltip` | `content` | `delayDuration` (read by `TooltipProvider`), `sideOffset`, `portal` |
+| `DropdownMenu` | `trigger`, `content`, `subContent`, `subTrigger`, `item`, `checkboxItem`, `radioItem`, `label`, `separator`, `shortcut` | `icons.check`, `icons.radio`, `sideOffset`, `collisionPadding` |
+| `ContextMenu` | same as `DropdownMenu` | `icons.check`, `icons.radio`, `collisionPadding`, `subContentPortal` |
+| `Select` | `trigger`, `scrollButton`, `content`, `viewport`, `popperViewport`, `label`, `item`, `separator` | `icons.trigger`, `icons.scrollUp`, `icons.scrollDown`, `icons.check`, `triggerSlot`, `collisionPadding` |
+| `Command` | `root`, `dialogContent`, `dialogCommand`, `inputWrapper`, `input`, `list`, `empty`, `group`, `separator`, `item`, `shortcut` | `icons.search`, `emptyClassNameReplaces` |
+
+`icons.*` take a node and replace the built-in icon. A `trigger` class is added only when set: without it the trigger renders exactly as the Radix one.
+
+New props and exports:
+
+- `DialogContent` `viewportAware` (default `true`): the bottom sheet on compact viewports, visual-viewport sizing, keyboard-aware scrolling and the body pointer-events fix. `false` keeps a centred dialog at every size and leaves the viewport and body alone.
+- `PopoverAnchor` (Radix `Popover.Anchor`).
+- `HoverCardContent` and `TooltipContent` `portal`: render into `document.body`.
+- `ContextMenuSubContent` `portal`.
+- Config `Select.triggerSlot`: adds `data-slot="select-trigger"`, which the `ButtonGroup` selectors read.
+- Config `Command.emptyClassNameReplaces`: a `className` on `CommandEmpty` (even `""`) replaces its classes instead of merging.
+
+`DialogTrigger`, `PopoverTrigger`, `DropdownMenuTrigger` and `ContextMenuTrigger` are now thin wrappers that read the config; `HoverCard` and `TooltipProvider` are function components that read the configured delays. Same DOM and props without config.
+
+### Card, table, progress, separator and label
+
+| Entry | Keys |
+| --- | --- |
+| `Card` | `classes.root`, `header`, `title`, `description`, `content`, `footer`, `action`. |
+| `Table` | `classes.wrapper` (the scroll `<div>`), `table`, `header`, `body`, `footer`, `row`, `head`, `cell`, `caption`. |
+| `Progress` | `classes.root`, `indicator`. |
+| `Separator` | `classes.root` (the orientation size classes stay). |
+| `Label` | `classes.root`. |
+
+```tsx
+<UiConfigProvider config={{ Card: { classes: { root: "rounded-surface bg-card text-card-foreground" } } }}>
+```
+
+New exports: `CardTitle`, `CardDescription`, `CardFooter`, `CardAction`.
+
+## Loaders, rows, status, sortable list and helpers
+
+Basic components and helpers that came from an app, all exported from the root, with `UiConfig` entries for the ones that have app-specific looks. Existing components keep their defaults. Every component here merges a caller `className` with `UiConfig.cn` when it is set.
+
+### Components
+
+- `Spinner` `variant?: "icon" | "circle" | "ring"`: without it the spinner draws the `mark` (prop, else `UiConfig.Spinner.mark`), else the loader icon as before; an explicit `variant` wins over the configured mark. `"icon"` is the loader icon. `"circle"` is a faint ring with a two-tone arc (Web Animations, paused off screen), for slots too small for a mark; `colors` (`{ track?, arc?, lead? }`, default `UiConfig.Spinner.circle`, else `currentColor`) sets its strokes. `"ring"` is the `Button` loading ring (fixed `h-4 w-4`, `currentColor`, unlabelled; `size`, `tone`, `stroke` and `decorative` do not apply). `Button loading` now renders `<Spinner variant="ring" />`, with the same DOM as before.
+- `Spinner` `mark?: SpinnerMark` (`{ viewBox, shapes, strokeWidth, dashArray }`; each shape is `{ points, stroke }` (a `<polygon>`) or `{ d, stroke }` (a `<path>`)). With a mark the spinner draws the outline with a dash that runs around each shape (Web Animations, 2s a lap, paused off screen and in hidden tabs). `tone` and `stroke` do not apply; `decorative` and numeric `size` (as `width`/`height`) do.
+- `CenteredSpinner` (`label`): a `Spinner` centred in its box (`flex-1`, `p-6`, `aria-busy`).
+- `LoadingState` (`variant` `Drive | Dots | Orbit`, `size` `default | sm`, `iconOnly`, `label`, `colors`, `labelStyle`): a 3×3 pulsing grid with a label and an elapsed timer (one shared 100ms clock, asleep in hidden tabs).
+- `RefreshSpinIcon` (`busy`, `className`): a refresh glyph that crossfades to `<Spinner variant="circle" />`.
+- `CrossfadeIcon` (`show`, `whenTrue`, `whenFalse`, keys, `variant` `default | soft`) and `CrossfadeIconSlot` (`iconKey`): keyed icon swaps on `motion` `m` (needs the app's `LazyMotion`).
+- `BorderBeam` (`active`, `size`, `colorVariant` `mono | progress | colorful`): a light that travels around the wrapper's border. Import `@vvedantb/ui/tokens/css/border-beam.css` for the `.beam-*` rules; colours are `--beam-color`, `--beam-progress-color`, `--beam-colorful-from` and `--beam-colorful-to`.
+- `StatusDot` (`tone`, `size`): a small coloured status dot; forwards `ref`.
+- `Surface` (`density` `tight | default | comfortable | none`) and `surfaceVariants`: a card-filled box with one padding.
+- `ListRow` (`link`, `href`, `onClick`, `selected`, `accentClassName`, `contentClassName`, `decoration`) and `LIST_ROW_CONTROL_CLASS`: a selectable row with a stretched native overlay; nested controls take `LIST_ROW_CONTROL_CLASS` to sit above it.
+- `Avatar`, `AvatarImage`, `AvatarFallback` (Radix Avatar from `radix-ui`).
+- Sortable list (built on [Kibo UI](https://www.kibo-ui.com) and dnd-kit): `SortableListProvider` (`onDragEnd` gets a `SortableListDragEndEvent`, vertical drag), `SortableListGroup`, `SortableListHeader` (`name` + `color`, or `children`), `SortableListItems`, `SortableListItem`. For a static selectable row use `ListRow`.
+- `useDragSensors({ sortable? })`: the dnd-kit sensor set for drag surfaces (mouse arms on distance, touch on a 200ms hold, keyboard; `sortable` adds sortable keyboard coordinates).
+
+`Avatar`, the `ListRow` idle hover and the sortable list drop highlight fill with `surface-secondary` (the same colour as `muted` under `compat-shadcn-rgb.css`).
+
+New dependencies (installed with the package): `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers` and `@dnd-kit/utilities`.
+
+### App config entries
+
+| Entry | Keys |
+| --- | --- |
+| `Spinner` | `mark` (default for the `mark` prop), `circle` (`{ track?, arc?, lead? }`, default for `colors` of the `circle` variant). |
+| `LoadingState` | `label`, `colors` (three column colours), `labelStyle`, `classes.label`. |
+| `StatusDot` | `classes.tone` (fill class per tone; tones left out keep theirs). |
+| `ListRow` | `classes.root`, `interactive`, `selected`, `idle`, `accent`, `overlay`, `content`. |
+
+```tsx
+<UiConfigProvider
+  config={{
+    Spinner: {
+      mark: { viewBox: "0 0 24 24", strokeWidth: 2, dashArray: "0.3 0.7", shapes: [{ d: LOGO_PATH, stroke: "#635bff" }] },
+      circle: { track: "#635bff", arc: "#635bff", lead: "#00d4ff" },
+    },
+  }}
+>
+```
+
+### Helpers
+
+- Motion (in the motion presets): `tokenTransition.fast` (150ms), `tokenTransition.base` (220ms), `tokenTransition.slow` (320ms), all `motionEase` like the CSS `--motion-fast/base/slow` tokens, and `staggerDelay(index, step = motionTiming.stagger, max = 0.2)`. The spring is the existing `springTransition`.
+- Gesture physics: `rubberband(overshoot, dimension, constant = 0.55)`, `projectVelocity(velocity, decelerationRate = 0.998)`, `DRAG_ACTIVATION_DISTANCE_PX` (8). `SidebarResize` now uses the shared `rubberband` (same maths).
+- Animation budget: `ensureRuntimeVisibility()` (sets `html[data-page-hidden]`), `observeAnimVisibility(el, onChange?)` and `useAnimOffscreenRef()` (set `data-anim-offscreen`), `bindRuntimeAnimation(el, animation)` (pauses a WAAPI loop while hidden, off screen or in a parked `aria-hidden` subtree; decorative chrome marked `data-anim-chrome` does not count).
+- Shared clock: `subscribeQuantized(intervalMs, onChange)`, `quantizedSnapshot(intervalMs)`, `msUntilNextBoundary(intervalMs)`.
+- Identity colours: `catSlotForId`, `catColorForId`, `catColorForSlot`, `CAT_SLOT_COUNT` (class names `text-cat-N`, `bg-cat-N`, `bg-cat-N/12`, `border-cat-N`; the app defines the `cat` colours).
+- Radius classes: `SURFACE_RADIUS_CLASS` (`rounded-surface`), `CONTROL_RADIUS_CLASS` (`rounded-control`).
+
+## App config: AI chat
+
+`UiConfigProvider` entries and opt-in props for the AI chat elements, plus the components and markdown renderer that came from an app. Without an entry each element renders its built-in DOM; `classes` parts replace built-in classes and the caller `className` merges last (with `UiConfig.cn`); other keys are prop defaults, and an explicit prop wins.
+
+```tsx
+const config = {
+  Conversation: { scrollButton: { label: "Scroll to end", showDelay: 150, size: "sm" } },
+  Message: { lazyActionTooltips: true },
+  PromptInput: { classes: { groupDragOver: "border-primary bg-primary/5" }, submitCrossfade: true },
+  Shimmer: { mode: "mask" },
+  CodeBlock: { plain: true, copyLabel: "Copy code" },
+} satisfies UiConfig;
+```
+
+- `Conversation`: `classes.content` (`ConversationContent`), `classes.scroll` (a default `scrollClassName`, merged before the prop), `classes.download`, and for `ConversationScrollButton` `classes.scrollButton`, `classes.scrollButtonMotion` (the animated wrapper; `""` renders it without a class) and `classes.scrollButtonFrame` (a static wrapper around the presence; none by default). `scrollButton` holds defaults for `label`, `icon`, `showDelay`, `size` and the motion (`initial`, `animate`, `exit`, `transition`). New `ConversationScrollButton` props: `label` (text after the icon, also `aria-label` and `title`), `icon`, `showDelay` (ms to wait after leaving the bottom before showing; hiding stays immediate; default 0) and `resetKey` (a change hides the button and cancels a pending show). The button now animates with `m` inside its own `LazyMotion`, so it also works under an app's `<LazyMotion strict>`.
+- `Message`: `classes.root`, `classes.user`, `classes.assistant` (the role classes of `Message`), `classes.content` (all `MessageContent` classes), `classes.branchSelector`, `classes.branchIcon` (a class in place of the arrows' `size={14}`), and `lazyActionTooltips`: a `MessageAction` mounts its tooltip on first hover or focus (focus opens it), not with the button.
+- `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (`PromptInputActionMenuTrigger` becomes the Radix trigger instead of a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
+- `PromptInputSettings` (new): an overflow menu with a "Model" submenu (one radio list, or a submenu per provider). Entry: `providerLabel(provider)` (default the id), `providerIcon(provider)` (default none), `classes.trigger`.
+- `TraitsPanel` (new, with `isUltrathinkPrompt`, `applyUltrathinkPrefix`): reasoning, speed, context and thinking segments for a model picker; inside a `PromptInputProvider` it offers "Ultrathink" by editing the prompt. Entry: `classes.label`, `classes.empty`, `classes.option`, `classes.optionSelected`, `classes.optionIdle`, `classes.note`.
+- `PromptInputSpeech`, `useSpeechRecognition`, `getSpeechRecognition` (new): Web Speech API dictation; the button renders nothing without the API.
+- `Queue`: one family, used in one of two ways. The queued-messages widget is unchanged: `Queue` with `count`, `QueueHeader`, `QueueList` (`open`) and `QueueItem` with `text` (`model`, `personalityName`, `personaName`, `personaImage`, `onEdit`, `onRemove`). The composable parts (the AI Elements `Queue`, new): `Queue` without `count` (a plain root), `QueueSection`, `QueueSectionTrigger`, `QueueSectionLabel`, `QueueSectionContent`, `QueueList` (inside a composable `Queue`: a list capped at `max-h-48`), `QueueItem` without `text` (an `li`, takes `ref`), `QueueItemIndicator`, `QueueItemContent`, `QueueItemActions`, `QueueItemAction`. The composable parts render no `motion.*`, so they work under `<LazyMotion strict>`. Entry `Queue`: `classes.sectionTrigger`.
+- `Shimmer`: `mode`, `as`, `classes.base`, `classes.overlay`, `classes.band`, `classes.copy`. New prop `mode`: `"gradient"` (default) or `"mask"`, which sweeps a masked copy of the text with transforms only (no repaint, paused offscreen). `mask` needs the app to define `.shimmer-overlay`, `.shimmer-band` and `.shimmer-copy` (or the `classes` it names).
+- `CodeBlock`: `plain`, `copyButtonSize`, `copyLabel` (a screen-reader label on the copy button), `copyEveryClick` (the copy button copies on every click, also while it shows the check; by default those clicks do nothing until it resets after `timeout`), `classes.container`, `classes.pre`, `classes.copyButton`, `classes.copyIcon` (a class in place of `size={14}`). New props: `plain` (no shiki: a `pre` with the code, and `children` replace that `pre` instead of sitting above it); `language` is now optional.
+- `Artifact`: `classes.root`, `classes.header`, `classes.title`, `classes.description`, `classes.actions`, `classes.action` (`ArtifactAction` and `ArtifactClose`), `classes.actionIcon`, `classes.content`, `actionSize`, `actionLabel` (`"sr-only"` names actions with a hidden span instead of `aria-label`). `ArtifactAction`: `tooltip` is optional (no tooltip, no wrapper) and `icon` also takes an icon component (`icon={IconCopy}`). New `ArtifactClose` (an action with an X, `label` default `"Close"`).
+- `Attachments`: `classes.item.<variant>`, `classes.preview.<variant>`, `classes.remove.<variant>` replace the variant classes of `Attachment`, `AttachmentPreview` and `AttachmentRemove`.
+- `FileChip` (new, no entry): a file name chip that opens the file.
+- `SonnerToaster`: `UiConfig.SonnerToaster` sets a default for any `SonnerToaster` prop; an explicit prop wins, and a prop passed as `undefined` keeps the config value. New prop `classes` (`ToastClassNames & { toaster?: string }`): replaces the package `classNames` per key (`""` removes one); `toaster` replaces `toaster group !font-sans` on the list (`""` removes it). Caller `toastOptions.classNames` still merge after. See also "Toaster" above.
+
+### Markdown
+
+`Markdown` (Streamdown with GFM, KaTeX math, CJK, Shiki code blocks with a wrap toggle and copy button, mermaid diagrams loaded on first use, GitHub alerts `> [!NOTE]`, links with the site favicon, file paths in inline code, copy as markdown) and `MarkdownLink`. `components` and `remarkPlugins` extend the defaults. It imports KaTeX's stylesheet; import `@vvedantb/ui/tokens/css/markdown.css` for the typography. That file reads the shadcn channel variables (`rgb(var(--foreground))`, `--muted-foreground`, `--border`, `--primary`, `--success`, `--warning`, `--destructive`), as with `compat-shadcn-rgb.css`, and fills code block and table panels with `var(--color-surface-secondary)` (defined by `tokens.css` and by the compat file, which maps it to the app's `--muted`); `--markdown-alert-important` (RGB channels, default `var(--primary)`) colours `[!IMPORTANT]`. `Markdown` merges a caller `className` with `UiConfig.cn`.
+
+New dependency (installed with the package): `katex`. `streamdown` and the `@streamdown/*` plugins stay peers; `streamdown` must be `^2.3.0` (`Markdown` uses `useIsCodeFenceIncomplete`, `parseMarkdownIntoBlocks` and the plugin types, which 2.2 and earlier lack).
+
+## Agent activity, plan, tests, preview and model picker
+
+AI surfaces that came from an app, exported from the root. Fills use `surface-secondary` (`bg-surface-secondary`, `from-surface-secondary/40`), which is the app's `--muted` under `compat-shadcn-rgb.css` and the secondary surface under `tokens.css`. They also use the shadcn colour names `bg-secondary`, `bg-popover` and `bg-card` and a few app utilities (`motion-press`, `smooth-shadow-*`, `scrollbar`, `scrollbar-none`, `text-2xs`, `text-3xs`), so they look as intended with `compat-shadcn-rgb.css` and an app that defines those utilities. They merge a caller `className` with `UiConfig.cn` when set.
+
+- `ActivityTasks` (`steps`, `isStreaming`, `name`, `startedAt`, `duration`, `layout` `folded | inline`, `onOpenFile`, `onRequestFullDetail`): an agent turn as a timeline. Tool runs fold behind one summary line, reasoning and mid-turn text render as Markdown, subtasks nest their steps, long timelines cap behind "Show N more". `OpenSubagentContext` gives subtask rows a "View" link.
+- The step model: `ActivityStep`, `ActivityTodoItem`, `ActivityQuestion`, `ActivityQuestionOption`, `ActivityStepOutput`, `ActivityStepEdit`, `activityStepHasRichDetail`, `activityStepConfig` (glyph and fallback label per step type), `ActivityThinkingIcon`, `useActivitySpinnerVerb`, `getRandomActivityVerb`, `useActivityElapsedSeconds`, `formatActivityElapsed`, `useStreamingDisclosure`.
+- Tool-call details show files with `FileChip` and output in a `CodeBlock` (`plain`) with its copy button, so the `CodeBlock` entry (see "App config: AI chat") styles those frames too.
+- `ActivityQuestionCard` (`questions`, `answers`): the read-only record of a multiple-choice question and its answer.
+- `AgentTrace`, `AgentTraceLine` (`status`: `AgentTraceStatus`, `running | error | pending`), `AgentTraceIcon` (`iconKey` crossfades a swap), `AgentTraceTitle` (`shimmer`), `AgentTraceDescription`, `AgentTraceCollapsible`, `AgentTraceCollapsibleTrigger` (`trailing`: controls beside the trigger), `AgentTraceCollapsibleContent`: one agent step as one line, with an optional fold.
+- `AgentPlan*`, `TestResults*` / `TestSuite*` / `TestResult*` (one test: `TestResult`, `TestResultStatusIndicator`, `TestResultName`, `TestResultDuration`, `TestResultError`, `TestResultErrorMessage`, `TestResultErrorStack`), `WebPreview*` (with `useWebPreview`), `ContextUsage*` (context window usage in a hover card: `ContextUsage`, `ContextUsageTrigger`, `ContextUsageContent`, `ContextUsageContentHeader` / `Body` / `Footer`, `ContextUsageInput`, `ContextUsageOutput`, `ContextUsageCacheRead`, `ContextUsageCacheWrite`, deprecated `ContextUsageCache`).
+- `ModelPicker` (button and popover; `simpleLadder` opens on a discrete slider; the one model picker), `ModelPickerContent` (the searchable model and account list, for menus; pair it with `modelPickerSurfaceClass`), `ModelOption`, `ModelAccount`, `findModelOption`, `formatModelDisplayLabel`, `getProviderLabel`, `ProviderIcon` (`claude`, `codex`, `opencode`, `cursor`).
+- Deprecated, removed in the next minor release: `ModelSelector*` and `PromptInputModelSelect*` (use `ModelPicker`). Behaviour is unchanged, except `ModelSelectorLogo`: it now renders `ProviderIcon` and fetches nothing (it loaded `https://models.dev/logos/<provider>.svg`). `anthropic`, `google-vertex-anthropic` and `claude` show the Claude mark, `openai` and `codex` the OpenAI mark, `opencode` and `cursor` their marks; any other id shows a neutral CPU glyph. It takes SVG props and `size` (default 12) and keeps the `"<provider> logo"` name. `ModelSelectorLogoGroup` styles `svg` children.
+
+### App config entries
+
+| Entry | Keys |
+| --- | --- |
+| `ActivityTasks` | `name` (agent name in the streaming header, default `"Agent"`; the `name` prop wins), `markdown` (a component that takes `{ className, mode, children }` and renders reasoning and reply text; default `Streamdown` with the cjk, code, math and mermaid plugins), `thinkingIcon` (`{ src, alt }`: `ActivityThinkingIcon` shows this image, 16px and round, instead of the brain glyph). |
+| `ActivityQuestionCard` | `classes.selectedOption` (fill of the picked option, default `bg-surface-tertiary`). |
+| `ModelPicker` | `classes.trigger` (replaces the `ModelPicker` trigger classes), `badgeRing.trigger` / `badgeRing.panel` (ring colour around the account initials badge on the trigger and in the panel; default `var(--color-border)` / `var(--color-surface-secondary)`). |
+
+```tsx
+const config = {
+  ActivityTasks: { name: "Ada", markdown: AppMarkdown, thinkingIcon: { src: "/logo.svg", alt: "Ada" } },
+  ActivityQuestionCard: { classes: { selectedOption: "bg-accent" } },
+  ModelPicker: { badgeRing: { trigger: "rgb(var(--input))", panel: "rgb(var(--muted))" } },
+} satisfies UiConfig;
+```
+
+## Kibo blocks
+
+Blocks that came from an app, built on [Kibo UI](https://www.kibo-ui.com). All exported from the root, next to the sortable list.
+
+### New components
+
+- Gantt: `GanttProvider` (`range`: `GanttRange`, `daily | monthly | quarterly`, `zoom`, `onZoomChange` for Ctrl/Cmd + wheel, `onAddItem`), `GanttSidebar` (`headerTitle`, `headerMeta`), `GanttSidebarGroup`, `GanttSidebarItem` (`icon`, `meta`, `selected`, `onSelectItem`), `GanttSidebarHeader`, `GanttTimeline`, `GanttHeader`, `GanttContentHeader`, `GanttColumns`, `GanttColumn`, `GanttFeatureList`, `GanttFeatureListGroup`, `GanttFeatureRow`, `GanttFeatureItem` (`onMove`, `onClick`), `GanttFeatureItemCard`, `GanttFeatureDragHelper`, `GanttToday`, `GanttContext` / `useGanttContext`. The canvas pans on drag, centres on today and grows by a year at either edge.
+- Kanban: `KanbanProvider` (`columns`, `data`, `overlay`, drag callbacks, `collisionDetection`), `KanbanBoard` (`disabled`; highlights while a card is over it or over one of its cards), `KanbanHeader`, `KanbanCards` (render prop per item), `KanbanCard`, `useKanbanContext`.
+- `ContributionGraph` (`data`: `ContributionGraphActivity[]`, `labels`: `ContributionGraphLabels`) with `ContributionGraphCalendar`, `ContributionGraphBlock`, `ContributionGraphFooter`, `ContributionGraphTotalCount`, `ContributionGraphLegend`.
+- `VideoPlayer` (media-chrome `MediaController`, dark control styling) with `VideoPlayerContent`, `VideoPlayerControlBar` and the `VideoPlayer*Button`, `VideoPlayerTimeRange`, `VideoPlayerTimeDisplay` and `VideoPlayerVolumeRange` controls.
+- `LiveCursor`, `LiveCursorPointer`, `LiveCursorBody`, `LiveCursorName` (a collaborator's pointer and name tag); `AvatarStack` (`size`); `ThemeSwitcher` (`value`, `defaultValue`, `onChange`; system, light, dark).
+
+Kanban, the sortable list and the gantt bars drag with `useDragSensors`.
+
+New dependencies (installed with the package): `media-chrome` and `dayjs` (a dev dependency before).
+
+### App config entries
+
+| Entry | Keys |
+| --- | --- |
+| `Gantt` | `classes.root` (scroll container), `today` (today pill), `todayDate` (the date under it), `dragHandle` (resize grip), `offscreenIndicator` (edge date chip). |
+| `Kanban` | `classes.card` (`KanbanCard` cursor, transitions and press), `cardTransition` (CSS `transition` list appended to dnd-kit's inline reorder transition; default 150ms `scale` and `opacity`). |
+| `ThemeSwitcher` | `classes.button` (each theme button). |
+| `VideoPlayer` | `classes.root` (`VideoPlayer`), `classes.controlBar` (`VideoPlayerControlBar`). |
+
+The defaults use plain Tailwind (`duration-150`, `text-[0.625rem]`, `shadow-lg`, `[scrollbar-width:none]`). Fills use `surface-secondary` (with `compat-shadcn-rgb.css` that is `--muted`). Apps with their own motion or shadow utilities put them here. Every kibo part merges a caller `className` with `UiConfig.cn`.
+
+```tsx
+const config = {
+  Kanban: { cardTransition: "scale var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out" },
+  VideoPlayer: { classes: { root: "overflow-hidden rounded-surface shadow-xl" } },
+} satisfies UiConfig;
+```
+
 ## Colour names in components
 
-Components use `text-muted-foreground`, `primary` and `--color-*` theme variables. They no longer use `text-muted`, `*-accent` or raw `var(--muted)` reads, which clash with shadcn names. Exceptions that match existing app markup on purpose: the `InputArea` ghost text, the `Button` `flat` variant and the `CommandDialog` `listLayout="auto"` group headings use `text-muted`. `tokens.css` still defines `--color-muted` and `--color-accent`. `pnpm --filter @vvedantb/ui check:tokens` fails if a component brings the old names back (it also runs in `build`, `test` and `verify`).
+Components use `text-muted-foreground`, `primary` and `--color-*` theme variables. They no longer use `text-muted`, `*-accent` or raw `var(--muted)` reads, which clash with shadcn names. Exceptions that match existing app markup on purpose: the `InputArea` ghost text, the `Button` `flat` variant and the `CommandDialog` `listLayout="auto"` group headings use `text-muted`. `tokens.css` still defines `--color-muted` and `--color-accent`. `pnpm --filter @vvedantb/ui check:tokens` fails if a component brings the old names back (it also runs in `build`, `test` and `verify`). It also fails on fill-type `muted` (`bg-`, `from-`, `via-`, `to-`, `fill-`, `stroke-`, `border-`, `ring-`, `divide-` and `outline-muted`, with variants and opacity; not `*-muted-foreground`): `muted` is a text colour in `tokens.css` and a fill in shadcn, so components fill with `surface-secondary`, which is the same fill under `compat-shadcn-rgb.css`. The dark-mode `Switch` off state, the `Slider` track and thumb and the slash menu row hover keep their `muted` fills on purpose, each line marked `check-tokens-allow: muted`. The package CSS (`tokens/src/css` and any `.css` under `src`) is checked too: a background, fill, stroke, border or outline colour, shadow or `--*-bg`-style variable that reads `--muted` or `--color-muted` fails; fill with `var(--color-surface-secondary)`.
 
 ## Using an existing shadcn RGB theme
 
@@ -1089,6 +1335,8 @@ The compat file defines `.glass-panel-strong` for toasts, dialogs and hover card
 
 A fixture that renders the main components against sample light and dark RGB variables is in `tokens/examples/compat-shadcn-rgb/`.
 
+The components that came from the app (loaders, `ListRow`, `Surface`, `BorderBeam`, `Avatar`, `StatusDot`, kanban and the sortable list, activity, agent trace, agent plan, test results, the model picker and markdown) render on plain `tokens.css` in light and dark in `tokens/examples/tokens-moved/`.
+
 `@clerk/clerk-react`, `convex`, `@tanstack/react-hotkeys`, `motion`, `zod` and `@vvedantb/server` (0.13.0) are optional peers (`peerDependenciesMeta`), so the package manager does not install or warn about them. The root still imports each of them statically from some module (`useStableAuth` and `ConvexClerkProvider` import Clerk; `ConvexClerkProvider` and `useEnsureUser` import `convex/react`; the artifact viewers import `@vvedantb/server`; the motion presets, `ConfirmSkipHint` and others import the rest). So an app that imports `@vvedantb/ui` must have all six resolvable, even if it uses none of those exports: a bundler resolves every import before it tree-shakes. `app/tests-node/convex-esm.test.mjs` pins which root modules import `convex` and Clerk, and `app/tests-node/artifacts-esm.test.mjs` which import `@vvedantb/server`.
 
 Full documentation: the repository `README.md`. Upgrading from `@vvedantb/tokens`, `@vvedantb/shell` or `@vvedantb/app-kit`: `MIGRATION.md`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -32,6 +32,8 @@
     "./tokens/css/animations.css": "./tokens/src/css/animations.css",
     "./tokens/css/nav-icons.css": "./tokens/src/css/nav-icons.css",
     "./tokens/css/compat-shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",
+    "./tokens/css/border-beam.css": "./tokens/src/css/border-beam.css",
+    "./tokens/css/markdown.css": "./tokens/src/css/markdown.css",
     "./tokens/compat/shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",
     "./tokens/css/*.css": "./tokens/src/css/*.css",
     "./tokens/tailwind-preset": {
@@ -58,6 +60,13 @@
     "./src/marketing/landing.css"
   ],
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "dayjs": "^1.11.13",
+    "katex": "^0.16.45",
+    "media-chrome": "^4.14.0",
     "react-day-picker": "^9.14.0"
   },
   "peerDependencies": {
@@ -102,7 +111,7 @@
     "react-dom": ">=19.0.0",
     "shiki": "^3.0.0",
     "sonner": "^2.0.3",
-    "streamdown": "*",
+    "streamdown": "^2.3.0",
     "tailwind-merge": "^2.6.0",
     "use-stick-to-bottom": "^1.1.0",
     "vaul": "^1.1.0",
@@ -144,7 +153,6 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "convex": "^1.47.0",
-    "dayjs": "1.11.19",
     "embla-carousel-react": "^8.6.0",
     "happy-dom": "^18.0.0",
     "motion": "^12.0.0",
@@ -155,7 +163,7 @@
     "react-dom": "^19.1.0",
     "shiki": "^3.0.0",
     "sonner": "^2.0.3",
-    "streamdown": "*",
+    "streamdown": "^2.3.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "4.3.3",
     "typescript": "^5.9.0",
@@ -189,7 +197,7 @@
   "scripts": {
     "check:tokens": "node tokens/scripts/check-component-tokens.mjs",
     "build": "node tokens/scripts/check-exports.mjs && node tokens/scripts/check-component-tokens.mjs && tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.consumer.json && tsc -p tokens/tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.consumer.json && tsc -p tsconfig.consumer-speech.json && tsc -p tokens/tsconfig.json",
     "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs app/tests-node/*.test.mjs",
     "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
     "analyze": "node tokens/verify/analyze.mjs"

package/shell/src/SidebarResize.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { animate } from "motion";
 import { cn } from "../../src/utils/cn";
+import { rubberband } from "../../src/utils/gesture";
 
 /** Opt-in resizable sidebar panel. Widths are panel px, rail excluded. */
 export type SidebarResizeOptions = {
@@ -45,10 +46,6 @@ export const SidebarResizeProvider = SidebarResizeContext.Provider;
 
 const KEYBOARD_STEP = 16;
 
-function rubberband(overshoot: number, dimension: number, constant = 0.55): number {
-  return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
-}
-
 type Sample = { x: number; t: number };
 
 function releaseVelocity(samples: Sample[]): number {

package/src/ai-elements/__snapshots__/queue.test.tsx.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`vibot Queue widget DOM > renders the closed widget 1`] = `"<div class="w-full overflow-hidden" style="height: auto; opacity: 1;"><button type="button" class="flex items-center justify-between w-full px-4 py-2.5 bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-tertiary rounded-t-2xl group"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-stack-2 text-muted-foreground"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"></path><path d="M4 12l8 4l8 -4"></path><path d="M4 16l8 4l8 -4"></path></svg><span class="text-sm font-medium text-foreground">Queued Messages</span><div class="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background border-separator bg-default text-default-foreground text-xs">3</div></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down text-muted-foreground transition-transform duration-200 ease-out"><path d="M6 9l6 6l6 -6"></path></svg></button></div>"`;
+
+exports[`vibot Queue widget DOM > renders the editing state, then saves the trimmed text 1`] = `"<div class="group relative p-2.5 rounded-lg transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary"><div class="flex flex-col gap-2"><textarea class="flex w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring min-h-[60px] text-sm">Draft</textarea><div class="flex justify-end gap-2"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground rounded-lg text-xs max-sm:hit-target h-7 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg><span class="ml-1 text-xs">Cancel</span></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90 rounded-lg text-xs max-sm:hit-target h-7 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check"><path d="M5 12l5 5l10 -10"></path></svg><span class="ml-1 text-xs">Save</span></button></div></div></div>"`;
+
+exports[`vibot Queue widget DOM > renders the editing state, then saves the trimmed text 2`] = `"<div class="group relative p-2.5 rounded-lg transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary"><div class="flex items-center gap-2"><p class="text-sm text-foreground/90 flex-1 truncate">Draft</p><div class="flex items-center gap-1.5 shrink-0"></div><div class="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-edit"><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415"></path><path d="M16 5l3 3"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 hover:bg-surface-tertiary rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0 text-danger hover:text-danger"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-trash"><path d="M4 7l16 0"></path><path d="M10 11l0 6"></path><path d="M14 11l0 6"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg></button></div></div></div>"`;
+
+exports[`vibot Queue widget DOM > renders the header with a custom class 1`] = `"<button type="button" class="flex items-center justify-between w-full px-4 py-2.5 bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-tertiary rounded-t-2xl group x"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-stack-2 text-muted-foreground"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"></path><path d="M4 12l8 4l8 -4"></path><path d="M4 16l8 4l8 -4"></path></svg><span class="text-sm font-medium text-foreground">Queued Messages</span><div class="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background border-separator bg-default text-default-foreground text-xs">1</div></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down text-muted-foreground transition-transform duration-200 ease-out"><path d="M6 9l6 6l6 -6"></path></svg></button>"`;
+
+exports[`vibot Queue widget DOM > renders the open widget 1`] = `"<div class="w-full overflow-hidden mb-2" style="height: auto; opacity: 1;"><button type="button" class="flex items-center justify-between w-full px-4 py-2.5 bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-tertiary rounded-t-2xl group"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-stack-2 text-muted-foreground"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"></path><path d="M4 12l8 4l8 -4"></path><path d="M4 16l8 4l8 -4"></path></svg><span class="text-sm font-medium text-foreground">Queued Messages</span><div class="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background border-separator bg-default text-default-foreground text-xs">3</div></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down text-muted-foreground transition-transform duration-200 ease-out rotate-180"><path d="M6 9l6 6l6 -6"></path></svg></button><div class="overflow-hidden" style="height: auto; opacity: 1;"><div class="bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none rounded-b-2xl"><div dir="ltr" data-slot="scroll-area" class="relative max-h-[240px]" style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" data-slot="scroll-area-viewport" class="size-full rounded-[inherit] outline-hidden" style="overflow-x: hidden; overflow-y: scroll;"><div style="min-width: 100%; display: table;"><div class="p-2 space-y-1.5"><div class="group relative p-2.5 rounded-lg transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary"><div class="flex items-center gap-2"><img alt="Ada" class="size-5 rounded-full shrink-0" src="https://example.com/ada.png"><p class="text-sm text-foreground/90 flex-1 truncate">Fix the build</p><div class="flex items-center gap-1.5 shrink-0"><div class="inline-flex items-center gap-1 rounded-full border py-1 font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background border-separator bg-transparent text-muted-foreground text-xs h-5 px-1.5">claude-sonnet</div><div class="inline-flex items-center gap-1 rounded-full border py-1 font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background border-separator bg-transparent text-muted-foreground text-xs h-5 px-1.5">Terse</div></div><div class="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-edit"><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415"></path><path d="M16 5l3 3"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 hover:bg-surface-tertiary rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0 text-danger hover:text-danger"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-trash"><path d="M4 7l16 0"></path><path d="M10 11l0 6"></path><path d="M14 11l0 6"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg></button></div></div></div><div class="group relative p-2.5 rounded-lg transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary extra"><div class="flex items-center gap-2"><p class="text-sm text-foreground/90 flex-1 truncate">Plain</p><div class="flex items-center gap-1.5 shrink-0"><div class="inline-flex items-center gap-1 rounded-full border py-1 font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background border-separator bg-transparent text-muted-foreground text-xs h-5 px-1.5">Bob</div></div><div class="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-edit"><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415"></path><path d="M16 5l3 3"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 hover:bg-surface-tertiary rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0 text-danger hover:text-danger"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-trash"><path d="M4 7l16 0"></path><path d="M10 11l0 6"></path><path d="M14 11l0 6"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg></button></div></div></div><div class="group relative p-2.5 rounded-lg transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary"><div class="flex items-center gap-2"><p class="text-sm text-foreground/90 flex-1 truncate">Bare</p><div class="flex items-center gap-1.5 shrink-0"></div><div class="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-edit"><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415"></path><path d="M16 5l3 3"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 hover:bg-surface-tertiary rounded-lg text-xs max-sm:hit-target h-6 w-6 p-0 text-danger hover:text-danger"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-trash"><path d="M4 7l16 0"></path><path d="M10 11l0 6"></path><path d="M14 11l0 6"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg></button></div></div></div></div></div></div></div></div></div></div>"`;

package/src/ai-elements/activity-question-utils.ts

@@ -0,0 +1,26 @@
+import type { ActivityQuestion } from "./activity-shared";
+
+/**
+ * The offered labels the user picked. A whole-answer match wins first so a
+ * single-select label containing ", " is not mistaken for several picks; only
+ * a multi-select answer is split on the ", " the dock joins it with.
+ */
+export function selectedLabels(
+  answer: string | undefined,
+  question: ActivityQuestion,
+): string[] {
+  if (answer === undefined) return [];
+  const offered = new Set(question.options.map((option) => option.label));
+  if (offered.has(answer)) return [answer];
+  if (!question.multiSelect) return [];
+  return answer.split(", ").filter((label) => offered.has(label));
+}
+
+/** Free text typed into "Other": an answer that matches no offered label. */
+export function freeTextAnswer(
+  answer: string | undefined,
+  chosen: string[],
+): string | null {
+  if (answer === undefined || answer.trim().length === 0) return null;
+  return chosen.length > 0 ? null : answer;
+}